<template>
    <div>
        <div class="scoretop" @click="scrollToTop" :class="[visible ? 'd-inline' : 'd-none']">
            <img src="../../../assets/images/banner/scoretop.png" alt="">
        </div>
        <img src="../../../assets/images/banner/customer.png" alt="" class="customerfixed" :style="{ opacity: imageOpacity }">
        <img src="../../../assets/images/banner/wxkf.png" alt="" class="fiexdwxkf" @mouseenter="showImage" @mouseleave="hideImage">

    </div>
</template>

<script>
import Icon from '../../icon/Icon'

export default {
    name: 'ScrollTop',
    components: { Icon },
    data() {
        return {
            visible: false,
            imageOpacity:0
        }
    },
    methods: {
        showImage() {
      this.imageOpacity = 1;
    },
    hideImage() {
      this.imageOpacity = 0;
    },
        scrollToTop() {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        },
        toggleVisible() {
            const scrolled = document.documentElement.scrollTop;
            if (scrolled > 300) {
                this.visible = true;
            } else if (scrolled <= 300) {
                this.visible = false;
            }
        }
    },
    created() {
        window.addEventListener('scroll', this.toggleVisible);
    },
    mounted() {
        this.toggleVisible();
    },
    beforeDestroy() {
        window.removeEventListener('scroll', this.toggleVisible);
    }
}
</script>
<style scoped>
.scoretop {
    position: fixed;
    bottom: 130px;
    right: 30px;
    cursor: pointer;
    width: 50px;
    height: 50px;
    line-height: 46px;
    border-radius: 50%;
    text-align: center;
    z-index: 999;
    transition: all 1s ease;
}
.fiexdwxkf{
    position: fixed;
    bottom: 180px;
    right: 30px;
    cursor: pointer;
    width: 50px;
    height: 50px;
    z-index: 999;
    box-shadow:
  0.1px 1.3px 5.6px rgba(0, 0, 0, 0.02),
  0.3px 3.1px 13.4px rgba(0, 0, 0, 0.028),
  0.5px 5.9px 25.3px rgba(0, 0, 0, 0.035),
  0.9px 10.5px 45.1px rgba(0, 0, 0, 0.042),
  1.7px 19.6px 84.4px rgba(0, 0, 0, 0.05),
  4px 47px 202px rgba(0, 0, 0, 0.07)
;
}

.customerfixed {
    position: fixed;
    bottom: 160px;
    right: 90px;
    cursor: pointer;
    width: 120px;
    height: 120px;
    z-index: 999;
    transition: all 0.5s ease;
}
</style>